<!--
 * @author: 十一
 * @since: 2024-08-26
 * layout-header.vue
 * @desc: new page
-->
<template>
  <a-layout-header
    style="background: #fff; padding: 0 20px"
    :style="{ background: publicConfigStore.algorithm ? '#000000' : '#ffffff' }"
  >
    <div class="flex justify-between itms-center">
      <div class="flex items-center">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="triggerCollapsed"
          style="font-size: 20px"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="triggerCollapsed"
          style="font-size: 20px"
        />
        <a-breadcrumb class="ml-5">
          <a-breadcrumb-item
            v-for="(item, index) in menuStore.selectedMenuItem"
          >
            {{ item.meta && item.meta.title }}
          </a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="flex items-center">
        <!-- 切换主题 -->
        <a-tooltip placement="bottom">
          <template #title>
            <span>切换主题</span>
          </template>
          <a-switch v-model:checked="publicConfigStore.algorithm" class="mr-5">
            <template #checkedChildren class="flex items-center">
              <i
                class="iconfont icon-yueliang"
                style="color: #fff; font-size: 20px"
              ></i>
            </template>
            <template #unCheckedChildren class="flex items-center">
              <i
                class="iconfont icon-taiyang"
                style="
                  color: #000;
                  margin-top: -20px;
                  font-size: 20px;
                  display: block;
                "
              ></i>
            </template>
          </a-switch>
        </a-tooltip>
        <!-- 切换主题色 END -->

        <!-- 主题色 -->
        <a-tooltip placement="bottom">
          <template #title>
            <span>主题颜色</span>
          </template>
          <input
            type="color"
            @change="changeTheme"
            v-model="themeColor"
            class="mr-5"
          />
        </a-tooltip>
        <!-- 主题色 END -->
        <!-- 全屏 -->
        <div class="mr-5">
          <a-tooltip placement="bottom">
            <template #title>
              <span>全屏</span>
            </template>

            <i
              class="iconfont icon-quanping_o"
              @click="handleEnlarge"
              v-if="isScreenfull"
            ></i>
            <i
              class="iconfont icon-quxiaoquanping_o"
              @click="handleEnlarge"
              v-if="!isScreenfull"
            ></i>
          </a-tooltip>
        </div>

        <!-- 全屏 END-->

        <!-- 代办事项 -->
        <div class="mr-5">
          <a-tooltip placement="bottom">
            <template #title>
              <span>代办事项（完善中）</span>
            </template>
            <a-badge count="5">
              <i class="iconfont icon-RectangleCopy3"></i>
            </a-badge>
          </a-tooltip>
        </div>

        <!-- 代办事项 END-->
        <!-- 用户名 -->
        <div class="mr-5">
          {{ userStore.userInfo && userStore.userInfo.nickname }}
        </div>
        <!-- 头像下拉菜单 -->
        <a-dropdown>
          <a-avatar
            :size="40"
            class="flex items-center justify-center"
            :src="userStore.userInfo && userStore.userInfo.avatar_url"
          >
            <template #icon><UserOutlined /></template>
          </a-avatar>
          <template #overlay>
            <a-menu>
              <!-- <a-menu-item>
                <a href="javascript:;" class="flex items-center">
                  <i
                    class="iconfont icon-RectangleCopy4 mr-2"
                    style="font-size: 22px"
                  ></i
                  >个人信息
                </a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" class="flex items-center">
                  <i
                    class="iconfont icon-RectangleCopy173 mr-2"
                    style="font-size: 22px"
                  ></i>
                  安全设置</a
                >
              </a-menu-item> -->
              <a-menu-item>
                <a
                  href="javascript:;"
                  class="flex items-center"
                  @click="handleLogout"
                >
                  <i
                    class="iconfont icon-RectangleCopy mr-2"
                    style="font-size: 22px"
                  ></i
                  >退出登录</a
                >
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import emitter from "@/utils/mitt";
import useMenuStore from "@/stores/modules/menu";
import { useRouter } from "vue-router";
import usePublicConfigStore from "@/stores/modules/public-config";
const publicConfigStore = usePublicConfigStore();
import useUserStore from "@/stores/modules/user";
const userStore = useUserStore();
import screenfull from "screenfull";

const router = useRouter();
const menuStore = useMenuStore();
const collapsed = ref<boolean>(false);
const triggerCollapsed = () => {
  collapsed.value = !collapsed.value;
  // 发送collapsed状态到 layout-menu
  emitter.emit("collapsed", collapsed.value);
};

const themeColor = ref<string>(publicConfigStore.theme);
// 切换主题
const changeTheme = (value: any) => {
  publicConfigStore.theme = value.target.value;
};

const isScreenfull = ref<boolean>(true);
function handleEnlarge() {
  if (screenfull.isEnabled) {
    screenfull.toggle(); // 开启全屏
    isScreenfull.value = false;
  } else {
    screenfull.exit(); //关闭全屏
    isScreenfull.value = true;
  }
}
// 退出登录
const handleLogout = () => {
  userStore.loginStatus = false;
  userStore.userInfo = null;
  userStore.token = null;
  localStorage.clear();
  router.push("/login");
};
</script>

<style scoped>
i {
  font-size: 24px;
  color: #666;
}
</style>
